<script lang="ts">
import { useDebounceFn } from '@peng_kai/kit/libs/vueuse';

export const coinNetworkPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./CoinNetwork.vue')),
  { title: computed(() => $t('yaumayCeCeamLBiC995Dn')), maskClosable: false, wrapClassName: 'ant-cover__Modal-drawer', centered: true, footer: null, closable: true },
);
</script>

<script setup lang="ts">
const query = ref('');

const debouncedFn = useDebounceFn(() => {
  // 假搜索
}, 500);
</script>

<template>
  <div class="py-5 text-sys-text-body">
    <div class="mb-5 flex flex-col gap-2.5">
      <div class="search">
        <AInput v-model:value="query" allowclear autofocus placeholder="Search for cryptos and networks" @change="debouncedFn">
          <template #addonBefore>
            <i class="i-local:search" />
          </template>
        </AInput>
      </div>
      <p class="break-words">
        Please note that these are currency approximations. All bets & transactions will be settled in the crypto equivalent. For further details feel free to contact our live support.
      </p>
    </div>
    <div class="cr">
      <label class="sub-title">
        Supported networks
      </label>
    </div>
    <div class="network">
      <label class="sub-title">
        Cryptocurrencies
      </label>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>
